<!doctype html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
<div layout:fragment="content" class="card-body main-content user">
    <form id="search-form">
        <div class="input-group search-group mb-3">
            <input name="pageNumber" type="hidden" value="0">
            <input name="pageSize" type="hidden" value="10">
            <input name="keyword" type="text" placeholder="输入关键词进行搜索" class="form-control">
            <div class="input-group-append">
                <button id="submit-button" type="button" class="btn btn-outline-primary">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </form>

    <div id="data-list-group" class="data-list-group">
        <nav id="pagination-bar" class="pagination-bar"></nav>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr class="bg-light">
                        <th scope="col" class="w3 right">#</th>
                        <th scope="col" class="w4 center">头像</th>
                        <th scope="col">用户来源</th>
                        <th scope="col">用户ID</th>
                        <th scope="col">用户名</th>
                        <th scope="col">登录名</th>
                        <th scope="col">最后登录时间</th>
                        <th scope="col" class="w8 center">超级用户</th>
                        <th scope="col" class="w4 center">启用</th>
                        <th scope="col">姓名</th>
                        <th scope="col">公司</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div id="data-modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">用户信息<small class="pl-2"></small></h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <ul id="tabs" class="nav nav-tabs">
                        <li class="nav-item">
                            <a href="#basic-tab" class="nav-link active" data-toggle="tab">基本信息</a>
                        </li>
                        <li class="nav-item">
                            <a href="#extra-tab" class="nav-link" data-toggle="tab">补充信息</a>
                        </li>
                    </ul>
                    <div class="tab-content mt-3 mb-2">
                        <div id="basic-tab" class="tab-pane fade show active">
                            <form id="basic-form">
                                <fieldset>
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label>用户来源</label>
                                            <div class="input-group">
                                                <input name="source" type="text" readonly class="form-control data-item">
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label>用户ID</label>
                                            <div class="input-group">
                                                <input name="userId" type="text" readonly class="form-control data-item">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label>用户名</label>
                                            <div class="input-group">
                                                <input name="userName" type="text" readonly class="form-control data-item">
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label>登录名</label>
                                            <div class="input-group">
                                                <input name="loginName" type="text" readonly class="form-control data-item">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label>头像链接</label>
                                            <div class="input-group link-input-group">
                                                <input name="avatarUrl" type="text" readonly class="form-control data-item">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-outline-secondary">
                                                        <i class="fa fa-link"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-sm-6">
                                            <label>主页链接</label>
                                            <div class="input-group link-input-group">
                                                <input name="profileUrl" type="text" readonly class="form-control data-item">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-outline-secondary">
                                                        <i class="fa fa-link"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-6">
                                            <label>邮箱</label>
                                            <div class="input-group">
                                                <input name="email" type="text" readonly class="form-control data-item">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <label>简介</label>
                                            <div class="input-group">
                                                <textarea name="bio" rows="3" readonly class="form-control data-item"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                        <div id="extra-tab" class="tab-pane fade">
                            <form id="extra-form">
                                <fieldset>
                                    <input name="id" type="hidden" class="data-item">
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <label>最后登录时间</label>
                                            <div class="input-group">
                                                <input name="lastLoginTime" type="text" readonly class="form-control data-item">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <div class="form-check">
                                                <input id="super-user-input" name="superUser" type="checkbox" 
                                                       class="form-check-input data-item">
                                                <label class="form-check-label" for="super-user-input">超级用户</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <div class="form-check">
                                                <input id="active-input" name="active" type="checkbox"
                                                       class="form-check-input data-item">
                                                <label class="form-check-label" for="active-input">启用</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <label>姓名</label>
                                            <div class="input-group">
                                                <input name="realName" type="text" maxlength="50" class="form-control data-item">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-sm-12">
                                            <label>公司</label>
                                            <div class="input-group">
                                                <input name="companyName" type="text" maxlength="50" class="form-control data-item">
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="col d-block"></div>
                    <button type="button" class="btn btn-secondary cancel-button" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save-button">保存</button>
                </div>
            </div>
        </div>
    </div>

    <script id="table-template" type="text/html">
        {{each list item index}}
            <tr data-id="{{item.id}}">
                <td class="w3 index">{{index + 1}}</td>
                <td class="w4 center p-1">
                    <img src="{{item.avatarUrl ? item.avatarUrl : '/images/avatar.jpg'}}"
                         style="width:38px;height:38px">
                </td>
                <td class="overflow">{{item.source}}</td>
                <td class="overflow">{{item.userId}}</td>
                <td class="overflow">{{item.userName}}</td>
                <td class="overflow">{{item.loginName}}</td>
                <td class="overflow">{{item.lastLoginTime}}</td>
                <td class="w8 center">
                    <i class="fa icon-{{item.superUser ? 'true' : 'false'}}"></i>
                </td>
                <td class="w4 center">
                    <i class="fa icon-{{item.active ? 'true' : 'false'}}"></i>
                </td>
                <td class="overflow">{{item.realName}}</td>
                <td class="overflow">{{item.companyName}}</td>
            </tr>
        {{/each}}
    </script>
</div>
</html>
